<template>
  <div class="seniority">
    <div class="mt-20px ml-12px name flex items-center">
      {{ regionName }}
    </div>
    <div class="content">
      <div class="go-out-tabs">
        <div class="left">
          <div class="rows" v-for="item in tabList" :key="item.key">
            <span class="name">{{ item.name }}</span>
            <img
              v-show="item.type != -1"
              src="@/assets/workbench/goout/close.png"
              width="9px"
              height="7px"
              alt=""
              class="img"
              @click="filterClose(item)"
            />
          </div>
        </div>
        <div class="right">
          <VantButton
            type="primary"
            size="normal"
            color="rgba(29, 111, 233, 0.15)"
            round
            class="VantButton"
            @click="filterShow"
          >
            <template>
              <div class="flex items-center justify-center">
                <VanImage
                  :src="require('@/assets/icon/icon_filter.png')"
                  class="VanImage"
                ></VanImage>
                <span class="mx-4px">筛选</span>
              </div>
            </template>
          </VantButton>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from "@/config/evenrBus";
import { Button as VantButton, Image as VanImage } from "vant";

export default {
  props: {
    region: {
      type: Boolean,
      default: true,
    },
    storeVue: {
      type: Object,
    },
    regionName: {
      type: String,
      default: "排行榜",
    },
  },
  components: {
    VantButton,
    VanImage,
  },
  computed: {
    tabList() {
      let list = [];
      let res = this.$store.state.work[this.storeVue.name];
      for (let key in res) {
        res[key].map((item) => {
          if (item.show) {
            list.push(item);
          }
        });
      }
      if (list.length == 0) {
        list.push({
          key: "followTypeList1",
          name: "全部数据",
          type: -1,
        });
      }
      return list;
    },
  },
  methods: {
    DelFilterList() {
      this.$emit("DelFilterList");
    },
    filterClose(row) {
      let res = this.$store.state.work[this.storeVue.name];
      for (let key in res) {
        res[key].map((item) => {
          if (item.key == row.key) {
            this.$store.commit(`work/${this.storeVue.del}`, {
              index: key,
              key: item.key,
            });
            this.$emit("DelFilterList");
          }
        });
      }
    },
    filterShow() {
      if (!this.region) {
        bus.$emit("work_singleLocationShowTime", true);
      } else {
        bus.$emit("work_selectDataFilterShowTime", true);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@mixin minxi-fontstyle($size, $weight, $color) {
  font-size: $size;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: $weight;
  color: $color;
}
.seniority {
  .name {
    @include minxi-fontstyle(16px, 500, #1f1f1f);
    font-family: PingFangSC-Medium, PingFang SC;
  }
  .content {
    margin: 12px 0 0 10px;
  }
}

.go-out-tabs {
  height: 44px;
  background: #ffffff;
  box-shadow: -1px 0px 1px 0px rgba(230, 230, 230, 0.31);
  display: flex;
  align-items: center;
  border-radius: 10px 0px 0px 0px;
  overflow: hidden;
  .left {
    flex: 1;
    display: flex;
    overflow-x: auto;
    .rows {
      height: 26px;
      background: #f6f7f9;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 14px 6px;
      margin: 9px 0 9px 6px;
      .name {
        font-size: 12px;
        @include minxi-fontstyle(12px, 500, #4a4f70);
        white-space: nowrap;
        margin-right: 7px;
        margin-left: 6px;
        font-family: PingFangSC-Medium, PingFang SC;
      }
      .img {
        margin-right: 7px;
      }
    }
    .rows:last-of-type {
      margin-right: 6px;
    }
  }
  .right {
    width: 81px;
    background: #ffffff;
    box-shadow: -1px 0px 1px 0px rgba(230, 230, 230, 0.31);
    padding: 8px 14px;
    font-size: 12px;
    .VantButton {
      border: 0;
      border-radius: 13px;
      font-size: 12px;
      color: #1d6fe9 !important;
      font-weight: 500;
      padding: 0;
      width: 63px;
      height: 26px;
      .VanImage {
        width: 18px;
        height: 18px;
        background: #1d6fe9;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        display: flex;
        ::v-deep .van-image__img {
          width: 12px;
          height: 12px;
        }
      }
    }
  }
}
</style>
